<template>
  <div id="teamAddPage">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="addTeamData.name"
            name="name"
            label="队伍名"
            placeholder="请输入队伍名"
            :rules="[{ required: true, message: '请输入队伍名' }]"
        />
        <van-field
            v-model="addTeamData.description"
            rows="4"
            autosize
            label="队伍描述"
            type="textarea"
            placeholder="请输入队伍描述"
        />

        <van-field
            is-link
            readonly
            name="datePicker"
            label="过期时间"
            :placeholder="addTeamData.expireTime ?? '点击设置过期时间'"
            @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
          <van-picker-group
              title="过期时间"
              :tabs="['选择日期', '选择时间']"
              next-step-text="下一步"
              @confirm="onConfirm"
              @cancel="onCancel"
          >
            <van-date-picker
                v-model="expireDate"
                :min-date="minDate"
                :max-date="maxDate"
            />
            <van-time-picker v-model="expireTime"/>
          </van-picker-group>
        </van-popup>
        <van-field name="radio" label="队伍状态">
          <template #input>
            <van-radio-group v-model="addTeamData.status" direction="horizontal">
              <van-radio name="0">公开</van-radio>
              <van-radio name="1">私有</van-radio>
              <van-radio name="2">加密</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
            v-if="addTeamData.status === '2'"
            v-model="addTeamData.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入队伍密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {showSuccessToast,showFailToast} from "vant";
import myAxios from "../plugins/myAxios.ts";

const router = useRouter();
const route = useRoute();
// 展示日期选择器
const showPicker = ref(false)
const minDate = ref(new Date())
const maxDate = ref(new Date(new Date().getTime() + 3600 * 1000 * 24 * 7))
const expireDate = ref(['2024', '1', '13'])
const expireTime = ref(['13', '14'])

const id = route.query.id;


// 需要用户填写的表单数据
const addTeamData = ref({})

// 获取之前的队伍信息
onMounted(async () => {
  if (id <= 0){
    showFailToast('加载队伍失败')
    return;
  }
  const res = await myAxios.get("/team/get",{
    params: {
      id
    }
  });
  if (res.data.code === 0) {
    addTeamData.value = res.data.data
  } else {
    showFailToast('加载队伍失败，请刷新重试')
  }
})

const onCancel = () => {
  showPicker.value = false
}

const onConfirm = () => {
  showPicker.value = false
  addTeamData.value.expireTime = `${expireDate.value.join('-')} ${expireTime.value.join(':')}`
}

// 提交
const onSubmit = async () => {
  const postData = {
    ...addTeamData.value,
    status: Number(addTeamData.value.status),
    expireTime:new Date(addTeamData.value.expireTime)
  }
  // todo 前端参数校验
  if (postData.status === 2 && !postData.password) {
    showFailToast('请输入队伍密码')
    return
  }
  const res = await myAxios.post("/team/update", postData);
  if (res.data?.code === 0 && res.data){
    showSuccessToast('更新成功')
    await router.push({
      path: '/team',
      replace: true
    });
  }else {
    showFailToast('更新失败')
  }
}

</script>

<style scoped>

</style>
